<template>
	<!-- 区块的实现-->

<div
  v-if="element && element.key"
  class="widget-block-view drag-widget"
  :class="{active: selectWidget.key == element.key, 'is_req': element.options.required}"
  @click.stop="handleSelectWidget(index)">

        <el-col :span="element.options.span<6 ? 6 : element.options.span" :label="element.name">
            <el-form-item class="widget-view "
                          v-if="element && element.key && element.type != 'divider' && element.type != 'block' && element.type!='editor'"
                          :class="{active: selectWidget.key == element.key, 'is_req': element.options.required}"
                          :label="element.name" label-width="100px"
                          @click.native.stop="handleSelectWidget(index)">
                <widget-element-item :element="element" is-table="block"></widget-element-item>
                <div class="widget-view-action" v-if="selectWidget.key == element.key">
                    <!-- 复制, 删除图标 -->
                    <button type="button"  class="show-circle action-clone">
                        <i class="iconfont icon-icon_clone" @click.stop="handleWidgetClone(index)"></i>
                    </button>
                    <button type="button"  class="show-circle action-delete">
                        <i class="iconfont icon-trash" @click.stop="handleWidgetDelete(index)"></i>
                    </button>
                </div>

 <!--              <div class="widget-view-drag" v-if="selectWidget.key == element.key">
                    <i class="iconfont icon-drag drag-widget"></i>
                </div> -->
            </el-form-item>


        </el-col>


</div>
</template>

<script>
import WidgetElementItem from '../../WidgetElementItem'
export default {
  components: {
    WidgetElementItem
  },
  props: ['element', 'select', 'index', 'data','elementIndex'],
  data () {
    return {

      selectWidget: this.select
    }
  },
  methods: {
    handleSelectWidget (index) {
        if (this.data){
            this.selectWidget = this.data[this.elementIndex]
        }

    },
    handleWidgetDelete (index) {
      if (this.data.length == 1) {
        this.$emit('select-change', -1)
      } else {
        if (this.data.length - 1 == index) {
          this.$emit('select-change', index - 1)
        } else {
          this.$emit('select-change', index)
        }
      }

      this.$nextTick(() => {
        this.data.splice(this.elementIndex, 1)
      })
    },
    handleWidgetClone (index) {
      const key = new Date().getTime() + ''
      let cloneData = {
        ...this.data[index],
        options: {...this.data[index].options},
        key,
        model: this.data[index].type + key,
      }

      if (Object.keys(this.data[index].options).includes('options')) {
        cloneData = {
          ...cloneData,
          options: {
            ...cloneData.options,
            options: cloneData.options.options.map(item => ({...item}))
          }
        }
      }

      this.data.splice(index, 0, cloneData)

      this.$nextTick(() => {
        this.selectWidget = this.data[index + 1]
      })
    },
  },
  watch: {
    select (val) {
      this.selectWidget = val
        console.log(this.index)
    },
    selectWidget: {
      handler (val) {
        this.$emit('update:select', val)
      },
      deep: true
    }
  }
}
</script>